// 库存信息管理页面——路由页面
import React, { Component } from 'react'
import './InventoryInfo.scss'
import axios from 'axios'
// 详情页组件
import DetailsInfo from '../compenent/Home/DetailsInfo'
// 图标
import {RocketIcon} from '@primer/octicons-react';
export default class InventoryInfo extends Component {
    constructor(props){
        super(props)
        this.state={
            productInfo:[],
            goodsID:'',
            brand:'',
            goodsName:'',
            model:'',
            category:'',
            intoDatetime:'',
            quantity:'',
            price:'',
            detailsInfo:false,
            amendInfo:true,
            // 限制只显示10条数据
            paginationInfo:[],
            pagination:10,
            indexNub:[]
        }
    }
    componentDidMount(){
        // 获取远端数据接口
        axios(`/store-manage/gw1901/goods-manage-g2/goods-info.php`).then(res =>{
           this.setState({
            productInfo:res.data
           });
           this.setState({
            // 截取10条数据
            paginationInfo:this.state.productInfo.slice(
                // 开始位置
                this.state.pagination - 10,
                // 结束位置
                this.state.pagination 
            )
        })
        const pageNumber=Math.ceil((this.state.productInfo.length)/10)
        for (let i = 1; i < pageNumber+1; i++) {
            this.setState({
                indexNub:[...this.state.indexNub,i]
            })
            
        }
        });
        
        
    }
    // 详情
    detailsInfo = (res,ind) =>{
        this.setState({
            goodsID:res.goodsID,
            brand:res.brand,
            goodsName:res.goodsName,
            model:res.model,
            category:res.category,
            intoDatetime:res.intoDatetime,
            quantity:res.quantity,
            price:res.price,
            detailsInfo:true
        })
    }
    // 关闭详情页
    offdetailsInfo = () => {
        this.setState({
            detailsInfo:false
        })
    }
    // 删除
    delInfo = (res) =>{ 
        if(window.confirm("请确认是否删除该条商品数据")){
            React.axios.get(`/store-manage/gw1901/goods-manage-g2/goods-delete.php?goodsID=${res.goodsID}`,{}).then(del =>{
                alert(del.data)
                // 获取远端数据接口
                React.axios.get(`/store-manage/gw1901/goods-manage-g2/goods-info.php`).then(info =>{
                this.setState({
                 productInfo:info.data
                })
             })
            })
        }
        
    }
    // 首頁
    fristPage = () =>{
        // 初始化
        this.setState({
            pagination:10
        })
        this.setState(state => {
                // 截取10条数据
                state.paginationInfo = state.productInfo.slice(
                    // 开始位置
                    state.pagination - 10,
                    // 结束位置
                    state.pagination 
                );
            });
    }
    // 上一页
    SelectPageUp=()=>{
        if(this.state.pagination>10){
            this.setState({
                pagination:this.state.pagination - 10,
            })
            this.setState(state => {
                // 截取10条数据
                state.paginationInfo = state.productInfo.slice(
                    // 开始位置
                    state.pagination - 10,
                    // 结束位置
                    state.pagination 
                );
            });
        }else{
            alert("已经是第一页了！")
        }
    }
    // 下一页pageDown
    pageDown=()=>{
        if(this.state.pagination>this.state.productInfo.length){
            alert("已经是最後一页了！")
        }else{
            this.setState({
                pagination:this.state.pagination + 10,
            });
            this.setState(state => {
                // 截取10条数据
                state.paginationInfo = state.productInfo.slice(
                    // 开始位置
                    state.pagination - 10,
                    // 结束位置
                    state.pagination 
                );
            });
        }
        
    }
    // 尾页
    nicePage = () =>{
        // 向上取整
        const nub=Math.ceil((this.state.productInfo.length)/10)*10;
        console.log(nub);
            this.setState({
                pagination:nub,
            })
            this.setState(state => {
                // 截取10条数据
                state.paginationInfo = state.productInfo.slice(
                    // 开始位置
                    state.pagination - 10,
                    // 结束位置
                    state.pagination 
                );
            });
    }
    // 指定页面
    IndexNub = (ind) =>{
        
        this.setState({
            pagination:10*(ind+1)
        })
        this.setState(state => {
                // 截取10条数据
                state.paginationInfo = state.productInfo.slice(
                    // 开始位置
                    state.pagination - 10,
                    // 结束位置
                    state.pagination 
                );
            });
    }
    render() {
        return (
            <div className="invinfo">
                <h2><RocketIcon size={36}/>库存信息管理页面</h2>
                <table className="table table-hover">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>品牌</th>
                            <th>名称</th>
                            <th>型号</th>
                            <th>分类</th>
                            <th>入库时间</th>
                            <th>数量</th>
                            <th>单价</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.state.paginationInfo.map((res,ind) =>(
                            <tr key={res.goodsID}>
                                <td> {res.goodsID} </td>
                                <td> {res.brand} </td>
                                <td> {res.goodsName} </td>
                                <td> {res.model} </td>
                                <td> {res.category} </td>
                                <td> {res.intoDatetime} </td>
                                <td> {res.quantity} </td>
                                <td> ￥{res.price} </td>
                                <td className="btn">
                                    <button onClick={()=>this.detailsInfo(res,ind)}>详情</button>
                                    {/* 修改数据并且传参 */}
                                    <button onClick={() => this.props.history.push({
                                        pathname: "/infoebtry",
                                        state: {
                                            // isModify: true,
                                            goodsInfo: res
                                        }
                                    })}>
                                        修改
                                    {/* <NavLink to="/infoebtry?newamendInfo=${this.state.amendInfo}">修改</NavLink> */}
                                    </button>
                                    <button onClick={() => this.delInfo(res,ind)}>删除</button>
                                </td>
                            </tr> 
                        ))}
                    </tbody>
                </table>
                {/* 详情页 */}
                <div>
                {
                    this.state.detailsInfo?
                    <DetailsInfo state={this.state} offdetailsInfo={this.offdetailsInfo}/>
                    :
                    <div></div>
                }
                </div>
                {/* 分页 */}
                <nav aria-label="Page navigation example" className="paging">
                    <ul className="pagination">
                    
                        <li className="page-item" ><button className="page-link"    onClick={()=>this.fristPage()}>首页</button></li>
                        <li className="page-item"><button className="page-link"    onClick={()=>this.SelectPageUp()}>上一页</button></li>
                        {
                    this.state.indexNub.map((res,ind)=>(
                    <li className="page-item" key={res}>
                        <button className="page-link" style={{backgroundColor:(this.state.pagination)===ind*10+10?"red":"beige"}} onClick={()=>this.IndexNub(ind)}>{res}
                        </button></li>
                    )) 
                }
                        <li className="page-item"><button className="page-link"  onClick={()=>this.pageDown()}>下一页</button></li>
                        <li className="page-item"><button className="page-link"  onClick={()=>this.nicePage()}>尾页</button></li>
                    </ul>
                </nav>
            </div>
        )
    }
}
